import {Card} from "@material-ui/core";
import "./ArticlesList.scss"
import React from 'react'

const cardStyle = {
  margin: "20px",
  // padding: "10px",
  height: "10em",
  // boxShadows: "0 0 10px black"
}

const content = {
  marginTop: "-6px",
  marginRight: "5px",
  // textDecoration: "none",
  color: "black",
}

const title = {
  fontSize: "18px",
  marginTop: "10px",
}

const dataStyle = {
  color: "#808080",
  fontSize: "12px",
  marginTop: "0"
}


interface Info {
  picture: string,
  title: string,
  content: string,
  href: string,
  data: string,
}

interface IProps {
}

interface IState {
  items: Info[];
}

class ArticlesList extends React.Component<IProps, IState> {
  constructor(props: {} | Readonly<{}>) {
    super(props);
    this.state = {items: []}
  }

  getInfo() {
    fetch("/test/list.json")
      .then(r => {
        return r.json()
      })
      .then(myJson => {
        this.setState({
          items: myJson
        })
      })
  }

  componentDidMount() {
    this.getInfo()
  }

  render() {
    const {items} = this.state
    const listItem = items.map((item, index) =>
      <Card key={index} style={cardStyle}>
        <a href={item.href} style={{display: 'flex', flexDirection: 'row', textDecoration: "none",}}>
          <img src={item.picture} className={"titlePic"} style={{marginRight: "10px"}} alt={item.title}/>
          <div style={{display: "flex", flexDirection: "column"}}>
            <div style={title}>
              <div style={{textAlign: "left"}} className={"listTitle"}>{item.title}</div>
            </div>
            <div style={content}>
              <p className={"details"} style={{textAlign: "left"}}>{item.content}</p>
              <div style={{display: 'flex', flexDirection: 'row'}}>
                <div style={dataStyle}>{item.data}</div>
              </div>
            </div>
          </div>
        </a>
      </Card>
    );

    return (
      <div style={{width: "100%"}}>
        <div style={{width: "80%", marginLeft: "auto", marginRight: "auto"}}>
          {listItem}
        </div>
      </div>
    );
  }

}


export default ArticlesList;